<template>
  <div v-if="product" class="product-detail">
    <el-descriptions class="margin-top" :column="4" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">产品名称</div>
        </template>
        {{ product.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">规格型号</div>
        </template>
        {{ product.size }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">工艺材质</div>
        </template>
        {{ product.material }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">单位</div>
        </template>
        {{ product.size }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">数量</div>
        </template>
        {{ product.num }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">单价（元）</div>
        </template>
        {{ formatAmount(product.unit_price) }}
      </el-descriptions-item>
      <el-descriptions-item :span="2">
        <template #label>
          <div class="cell-item">总价（元）</div>
        </template>
        {{ formatAmount(product.total_price) }}
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template #label>
          <div class="cell-item">备注</div>
        </template>
        {{ product.remark }}
      </el-descriptions-item>
      <el-descriptions-item :span="4">
        <template #label>
          <div class="cell-item">设计图</div>
        </template>
        <el-image
          v-for="(item, index) in files"
          :key="item"
          :src="item"
          style="width: 80px; height: 80px; margin-right: 10px"
          :preview-src-list="files"
          :initial-index="index"
          fit="cover"
        ></el-image>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts" name="productDetail">
import { reactive, computed } from 'vue';
import { formatAmount } from '/@/utils/fomatter';
import { getPreviewUrl } from '/@/utils';

const props = defineProps({
  product: {
    default: null,
  },
});

const files = computed(() => {
  if (props.product) {
    return JSON.parse(props.product.files).map((item) => getPreviewUrl(item.name));
  }
  return [];
});

const handleViewFiles = (row: any) => {};
</script>

<style lang="scss"></style>
